<template>
	<div class="wrapper">
		<div style="width: 700px;">
			<el-form label-width="80px">
				<el-form-item label="学生名称">
					<el-input v-model="editForm.nickname" size="small" placeholder="请输入名称,最多可添加15个字"></el-input>
				</el-form-item>
				<el-form-item label="学生手机号">
					<el-input size="small" v-model="editForm.mobile" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="学员头像">
					<el-upload class="upload-demo" :action="uploadURL" :file-list="fileList" list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="性别">
					<!-- <el-select v-model="editForm.sex" size="small" placeholder="请选择">
						<el-option>
						</el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item label="出生日期">
					<el-col :span="11">
						<el-date-picker size="small" type="date" placeholder="选择日期" v-model="editForm.created_at"
							style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="所在城市">
					<el-select size="small" v-model="editForm.province_id" placeholder="请选择">
						<el-option>
						</el-option>
					</el-select>

					<el-select size="small" v-model="addForm.city_id" placeholder="请选择">
						<el-option value="a">
						</el-option>
					</el-select>

					<el-select size="small" v-model="addForm.district_id" placeholder="请选择">
						<el-option value="a">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="111">
					<el-input size="small" placeholder="请选择"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="addUser">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

 <script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				// 修改用户的参数
				editForm: {
					id: '',
					avatar: "", //是	string	头像
					birthday: "", //是	string	生日日期
					province_id: "", //是	string	省ID
					city_id: "", //string	城市ID
					district_id: "", //是	string	地区ID
					mobile: "", //string	手机号码
					nickname: "", //是	string	姓名
					sex: '',
				},
				fileList: [{
					name: 'food.jpeg',
					url: 'http://120.53.31.103:84/uploads/avatar.jpg'
				}],
				// 图片上传地址
				uploadURL: "http://120.53.31.103:84/api/public/img",
				// 图片上传组件的请求对象
				headerObj: {
					Authorization: 'Bearer' + sessionStorage.getItem("school_token"),
				},
				picPreviewPath: "",
				// 上传的图片临时路径（对象）
				pics: [],
				file: "",
				cityList: [],
				total: 0,
				id: "",
			}
		},
		mounted() {},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// async handleSuccess() {
			// 	try {
			// 		const data = await this.$http.post(`public/img/file`)
			// 		console.log(data)
			// 	} catch (e) {
			// 		this.$message.error(e)
			// 	}
			// },
			async addUser() {
				try {
					const {
						data: res
					} = await this.$http.put('user/'+this.editForm.id,this.editForm)
					if (res.code !== 200) {
						return this.$message.error(res.msg)
					}
					this.$message.success(res.msg)
					this.$router.push('/Student')
				} catch (e) {
					this.$message.error(e)
				}
			},
			// // 获取城市的数据列表
			// async getCityList() {
			// 	try {
			// 		const {
			// 			data: res
			// 		} = await this.$http.get('sonArea/id');
			// 		console.log(res)
			// 		this.cityList = res.data;
			// 	} catch (e) {
			// 		this.$message.error(e)
			// 	}
			// },
			async getUserInfoList() {
				try {
					let id = this.$route.params.uid;

					const {
						data: res
					} = await this.$http.get(`user/${this.id}`);
					let actIndex = res.data.list.filter(item => {

						return item.uid == id;
					})

					if (res.code !== 200) {
						return this.$message.error(res.msg)
					}
					this.editForm = actIndex[this.total];
					this.editForm.id = actIndex[this.total].uid;

				} catch (e) {
					this.$message.error(e)
				}
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			// this.getCityList();
			this.getUserInfoList()
		},
	}
</script>

<style scoped>
	.el-upload {
		width: 60px;
	}
</style>
